<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<script>
	window.onload = function(){	
		canvas = document.getElementById('mycanvas');
		ctx = canvas.getContext('2d');
		
		ctx.strokeStyle = '#ff0000';
		
		ctx.beginPath();
		ctx.arc(100, 200, 45, 0, Math.PI * 1.5,false);
		ctx.stroke();
		ctx.closePath();
	
	
	
		
		ctx.lineWidth = '5';
		ctx.strokeStyle = 'rgb(255,0,0)';
		ctx.fillStyle = 'rgb(255,200,200)';
				
		ctx.beginPath();
		ctx.moveTo(200,500);
		ctx.arc(200, 400, 100, 0, Math.PI * 1,true);
		ctx.fill();
		ctx.stroke();
		ctx.closePath();
		
		
		
		
		
		ctx.lineWidth = '5';
		ctx.strokeStyle = 'rgb(255,0,0)';
		ctx.fillStyle = 'rgb(255,200,200)';
				
		ctx.beginPath();
		ctx.moveTo(200,500);
		ctx.arc(200, 400, 100, 0, Math.PI * 1,false);
		ctx.fill();
		ctx.closePath();
		ctx.stroke();
		
		
		
		
		
		
		
		var color = 'rgb(255,200,200)';
		
		ctx.lineWidth = '5';
		ctx.strokeStyle = 'rgb(255,0,0)';
		ctx.fillStyle = color;
				
		ctx.beginPath();
		ctx.moveTo(500,300);
		ctx.arc(500	, 300, 100,Math.PI*1.9, Math.PI * 2.1,true);
		ctx.fill();
		ctx.closePath();
		ctx.stroke();
		
		
		ctx.lineWidth = '5';
// 		ctx.strokeStyle = 'rgb(255,0,0)';
// 		ctx.fillStyle = 'rgb(255,200,200)';
				
		ctx.beginPath();
// 		ctx.moveTo(500,300);
		ctx.arc(500	, 250, 10,0, Math.PI * 2,false);
// 		ctx.fill();
		ctx.closePath();
		ctx.stroke();
		
	}
</script>

<body>
	<canvas id = 'mycanvas' width = '600px' height = '500px'></canvas>

</body>
</html>